<template>
  <up-popup :safeAreaInsetBottom="false" :show="show" bgColor="transparent" mode="center" @close="close" @open="open">
    <view class="popup_cnt bg_set">

      <view class="title l_f_r_c_c text_b_28">
        <slot name="title">
          <text> {{ title }}</text>
        </slot>
      </view>
      <slot name="content">
        <text class="text_4_26">
          {{ content }}
        </text>
      </slot>
      <view class="btn_b l_f_r_sa_c text_5_28 ">
        <view v-if="showClose" class="btn_b_l l_f_r_c_c flex_1" @click="show = false">{{ closeText }}</view>
        <view class="btn_b_r l_f_r_c_c flex_1" @click="confirm">
          {{ confirmText }}
        </view>
      </view>
    </view>
  </up-popup>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "提示"
  },
  content: {
    type: String,
    default: ""
  },
  confirmText: {
    type: String,
    default: "确定"
  },
  showClose: {
    type: Boolean,
    default: true
  },
  closeText: {
    type: String,
    default: "取消"
  }
});

const show = ref(false);
const emit = defineEmits(["confirm"]);

function confirm() {
  show.value = false;
  emit("confirm");
}

const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
defineExpose({
  open,
  close
});
</script>
<style lang="scss" scoped>
.popup_cnt {
  //background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1757123951514.png");
  width: 618rpx;
  height: 372rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 0 38rpx;
  padding-top: 56rpx;

  .title {
    margin-bottom: 10rpx;
  }

  .btn_b {
    position: absolute;
    bottom: 0;
    left: 9rpx;
    height: 100rpx;
    width: 600rpx;
    border-top: 1px solid rgba(142, 130, 116, 0.5);

    .btn_b_l {
      color: #555;
      flex: 1;
      position: relative;
      height: 100%;

      &::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 90rpx;
        border-right: 1px solid rgba(142, 130, 116, 0.5);
      }
    }

    .btn_b_r {
      height: 100%;
      flex: 1;
      color: #F67800;

    }
  }

}
</style>
